<template>
  <a-modal width="60%" :label-col="6" :wrapper-col="14" :visible="open" @cancel="onClose" @ok="submitForm">
    <a-divider orientation="left">
      <b>报名信息</b>
    </a-divider>
    <a-form-model ref="form" :model="form" :rules="rules" :layout="inline" :labelAlign="left" >
      <a-row :gutter="24">
        <a-col :span="12">
          <a-form-model-item label="商机名称" prop="name" >
            <a-input v-model="form.name" placeholder="请输入商机名称" />
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="手机号" prop="phone" >
            <a-input v-model="form.phone" placeholder="请输入手机号" />
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="商机归属人" prop="ascriptionSale" >
            <a-select placeholder="请选择商机归属人" v-model="form.ascriptionSale" :showSearch="true" :filterOption="hanleFilter">
              <a-select-option v-for="(d, index) in dataSource" :key="index" :value="d.id" >{{ d.name }}</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="试课教练" prop="ascriptionTeacher" >
            <a-select placeholder="请选择试课教练" v-model="form.ascriptionTeacher" :showSearch="true" :filterOption="hanleFilter">
              <a-select-option v-for="(d, index) in dataSource" :key="index" :value="d.id" >{{ d.name }}</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="上课校区" prop="ascription" >
            <a-tree-select
              v-model="form.ascription"
              style="width: 100%"
              :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
              :tree-data="treeData"
              placeholder="请选择上课校区"
              :replaceFields="{children:'children', title:'label', key:'id', value: 'id' }	"
              tree-default-expand-all
            >
            </a-tree-select>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="商机来源" prop="source" >
            <a-radio-group v-model="form.source" button-style="solid">
              <a-radio-button v-for="(d, index) in sourceOptions" :key="index" :value="d.dictValue">{{ d.dictLabel }}</a-radio-button>
            </a-radio-group>
          </a-form-model-item>
        </a-col>
        

        <template v-if="flag">
          <a-divider orientation="left">
            <b>基本信息</b>
          </a-divider>
          <a-col :span="12">
            <a-form-model-item label="身份证号" >
              <a-input v-model="form.cardNo" @blur="changeDate()"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="出生日期" >
              <a-date-picker v-model="form.birthday" @change="timeChange"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="监护人" >
              <a-input v-model="form.curator" placeholder="请输入监护人" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="在读学校" prop="school" >
              <a-input v-model="form.school" placeholder="请输入在读学校" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="班型" prop="classType" >
              <a-radio-group v-model="form.classType" button-style="solid">
                <a-radio-button v-for="(d, index) in classTypeOptions" :key="index" :value="d.dictValue">{{ d.dictLabel }}</a-radio-button>
              </a-radio-group>
            </a-form-model-item>
          </a-col>
        </template>
      </a-row>
    </a-form-model>
  </a-modal>
</template>

<script>
import { getStudent, addStudent, updateStudent,getOwnerGroup } from '@/api/manager/student'
import moment from 'moment'

export default {
  name: 'CreateForm',
  props: {
    sourceOptions: {
      type: Array,
      required: true
    },
    intentionOptions: {
      type: Array,
      required: true
    },
    sexOptions: {
      type: Array,
      required: true
    },
    statusOptions: {
      type: Array,
      required: true
    },treeData: {
      type: Array,
      required: true
    },
    classTypeOptions: {
      type: Array,
      required: true
    }
  },
  components: {
  },
  data () {
    return {
      flag:false,
      dataSource:[],
      submitLoading: false,
      formTitle: '',
      value:'',
      // 表单参数
      form: {
        classType:null,
        id: null,
        name: null,
        avater: null,
        cardNo: null,
        birthday: null,
        curator: null,
        phone: null,
        source: '0',
        ascription: null,
        ascriptionSale: null,
        intention: '0',
        product: null,
        age: null,
        sex: null,
        height: null,
        weight: null,
        school: null,
        address: null,
        proxyId: null,
        nature: null,
        status: 0,
        deptId: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null

      },
      // 1增加,2修改
      formType: 1,
      open: false,
      rules: {
        name: [
          { required: true, message: '商机名称不能为空', trigger: 'blur' }
        ],

        curator: [
          { required: true, message: '监护人不能为空', trigger: 'blur' }
        ],

        phone: [
          { required: true, message: '手机号不能为空', trigger: 'blur' }
        ],

        source: [
          { required: true, message: '商机来源不能为空', trigger: 'blur' }
        ],

        ascription: [
          { required: true, message: '商机归属校区不能为空', trigger: 'blur' }
        ],

        ascriptionSale: [
          { required: true, message: '商机归属人不能为空', trigger: 'blur' }
        ],
        
        age: [
          { required: true, message: '年龄不能为空', trigger: 'blur' }
        ],

        sex: [
          { required: true, message: '性别不能为空', trigger: 'change' }
        ],
        classType: [
          { required: true, message: '版型不能为空', trigger: 'change' }
        ]

      }
    }
  },
  filters: {
  },
  created () {
  },
  computed: {
  },
  watch: {
  },
  mounted () {
  },
  methods: {
    hanleFilter(input, option){
      return (
        option.componentOptions.children[0].text.indexOf(input) >= 0
      );
    },
    changeDate(){
      var birthday = moment(this.form.cardNo.substr(6,8),'YYYYMMDD').format('YYYY-MM-DD');
      if(birthday == 'Invalid date'){
        this.$message.error('身份证号输入有误！')
        return;
      }
      this.form.birthday = birthday;
    },
    timeChange(value){
      this.form.birthday = moment(value).format('YYYY-MM-DD');
    },
    changeValue(value,option){
      this.form.ascriptionSale = option.data.key
    },
    getOwner(){
      getOwnerGroup({deptId:this.form.deptId}).then(resp => {
        this.dataSource = resp.data;
      });
    },
    onClose () {
      this.open = false
    },
    // 取消按钮
    cancel () {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset () {
      this.formType = 1
      this.dataSource = []
      this.form = {
        id: null,

        name: null,

        avater: null,

        cardNo: null,

        birthday: null,

        curator: null,

        phone: null,

        source: '0',

        ascription: null,

        ascriptionSale: null,

        intention: '0',

        product: null,

        age: null,

        sex: null,

        height: null,

        weight: null,

        school: null,

        address: null,

        proxyId: null,

        nature: null,

        status: 0,

        deptId: null,

        createBy: null,

        createTime: null,

        updateBy: null,

        updateTime: null,

        remark: null

      }
    },
    /** 新增按钮操作 */
    handleAdd (deptId) {
      this.reset()
      this.formType = 1
      this.open = true
      this.form.deptId = deptId;
      this.form.ascription = deptId;
      this.getOwner();
      this.formTitle = '添加'
      this.flag = false;
    },
    /** 修改按钮操作 */
    handleUpdate (row, ids,deptId,flag) {
      this.reset()
      this.form.deptId = deptId;
      this.getOwner();
      this.formType = 2
      const id = row ? row.id : IDBObjectStore
      getStudent(id).then(response => {
        this.form = response.data
        this.value = response.data.ascriptionSaleName;
        this.form.sex = response.data.sex != null ? response.data.sex.toString() : "";
        this.open = true
        this.formTitle = '修改'
        this.form.deptId = deptId;
        this.flag = flag == true ? flag : (this.form.status != null && this.form.status == 'A' ? false : true);
      })
    },
    /** 提交按钮 */
    submitForm: function () {
      if(this.form.phone.length != 11){
        this.$message.error("手机号填写错误！")
        return;
      }
      this.$refs.form.validate(valid => {
        if (valid) {
          if(this.form.source == 0){
            this.$message.error('请填写商机来源！')
            return;
          }
          this.submitLoading = true
          if (this.form.id !== undefined && this.form.id !== null) {
            this.form.status = this.flag ? 'B' : 'A';
            updateStudent(this.form).then(response => {
              this.$message.success(
                '修改成功',
                3
              )
              this.open = false
              this.$emit('ok')
            }).finally(() => {
              this.submitLoading = false
            })
          } else {
            this.form.status = 'A'
            addStudent(this.form).then(response => {
              this.$message.success(
                '新增成功',
                3
              )
              this.open = false
              this.$emit('ok')
            }).finally(() => {
              this.submitLoading = false
            })
          }
        } else {
          return false
        }
      })
    }
  }
}
</script>
<style>
.certain-category-search-dropdown .ant-select-dropdown-menu-item-group-title {
  color: #666;
  font-weight: bold;
}

.certain-category-search-dropdown .ant-select-dropdown-menu-item-group {
  border-bottom: 1px solid #f6f6f6;
}

.certain-category-search-dropdown .ant-select-dropdown-menu-item {
  padding-left: 16px;
}

.certain-category-search-dropdown .ant-select-dropdown-menu-item.show-all {
  text-align: center;
  cursor: default;
}

.certain-category-search-dropdown .ant-select-dropdown-menu {
  max-height: 300px;
}
</style>
<style scoped>
.certain-category-search-wrapper
  >>> .certain-category-search.ant-select-auto-complete
  .ant-input-affix-wrapper
  .ant-input-suffix {
  right: 12px;
}
.certain-category-search-wrapper >>> .certain-search-item-count {
  position: absolute;
  color: #999;
  right: 16px;
}
.certain-category-search-wrapper
  >>> .certain-category-search.ant-select-focused
  .certain-category-icon {
  color: #108ee9;
}
.certain-category-search-wrapper >>> .certain-category-icon {
  color: #6e6e6e;
  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  font-size: 16px;
}
</style>
